<div class="top">
  <mat-chip-list>
    <mat-chip color="primary" class="mat-h2" selected>
      <span>站点名称： 珠海移asdfassdfgsdfgsgfsfdfasdfaf动特里集团 [0001]</span>
    </mat-chip>
  </mat-chip-list>
  <button class="stop-power" mat-button color="warn" mat-raised-button>
    <mat-icon>power_settings_new</mat-icon>
    <span class="mat-h4">停止错峰</span>
  </button>
</div>

<mat-tab-group mat-align-tabs="start">
  <!-- *******  基本信息  ******* -->
  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon class="tab-icon">speed</mat-icon>
      基本信息
    </ng-template>
    <div class="card-box">
      <mat-card>
        <mat-card-title>储能效益统计</mat-card-title>
        <mat-card-content>
          <div class="car-content">
            <!-- 饼图 -->
            <div echarts [options]="chartOptionPie" class="pie"></div>
            <div class="details">
              <h3 class="mat-h2">统计时间：{{range.controls['start'].value | date:"YYYY-MM-dd"}} 至
                {{range.controls['end'].value | date:"YYYY-MM-dd"}}</h3>
              <!-- 日期范围选择器 -->
              <mat-form-field appearance="fill" [formGroup]="range">
                <mat-label>请选择统计时间</mat-label>
                <mat-date-range-input [rangePicker]="picker">
                  <input matStartDate formControlName="start" placeholder="开始日期"
                    (dateChange)="dateChange('dateChange', $event)">
                  <input matEndDate formControlName="end" placeholder="结束日期"
                    (dateChange)="dateChange('dateChange', $event)">
                </mat-date-range-input>
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-date-range-picker #picker disabled="false">
                  <mat-datepicker-actions>
                    <button mat-button matDatepickerCancel>取消</button>
                    <button mat-raised-button color="primary" matDatepickerApply>确定</button>
                  </mat-datepicker-actions>
                </mat-date-range-picker>
              </mat-form-field>
              <div class="mat-body">累计放电：{{'?'+'10KWH'}}</div>
              <div class="mat-body">累计电费：{{'?'}}</div>
              <div class="mat-body">错峰收益：{{'?'}}</div>
            </div>
          </div>
        </mat-card-content>
      </mat-card>

      <!-- 第二张卡片 -->
      <mat-card>
        <mat-card-title>站点储能系统告警和健康状态</mat-card-title>
        <mat-card-content>
          <div class="list">
            <div class="left">
              <div class="item">
                <div class="name">热失控</div>
                <div class="progress">
                  <mat-progress-bar mode="determinate" value="40"></mat-progress-bar>
                </div>
              </div>
              <div class="item">
                <div class="name">内短路</div>
                <div class="progress">
                  <mat-progress-bar mode="determinate" value="30"></mat-progress-bar>
                </div>
              </div>
              <div class="item">
                <div class="name">析锂</div>
                <div class="progress">
                  <mat-progress-bar mode="determinate" value="40"></mat-progress-bar>
                </div>
              </div>
              <div class="item">
                <div class="name">一致性</div>
                <div class="progress">
                  <mat-progress-bar mode="determinate" value="40"></mat-progress-bar>
                </div>
              </div>
            </div>
            <div class="right">
              <div class="item">
                <div class="name">SOH</div>
                <div class="state">良好</div>
              </div>
              <div class="item">
                <div class="name">电压一致性</div>
                <div class="state">良好</div>
              </div>
              <div class="item">
                <div class="name">温度一致性</div>
                <div class="state">良好</div>
              </div>
              <div class="item">
                <div class="name">充放电状况</div>
                <div class="state">良好</div>
              </div>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
    </div>

    <div class="line-box">
      <mat-card>
        <div class="title mat-h1">分时电价策略执行状态图</div>
        <div class="line" echarts [options]="optionLine"></div>
      </mat-card>
    </div>
  </mat-tab>


  <!-- *******  设备信息  ******* -->
  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon class="tab-icon">ev_station</mat-icon>
      <!-- <mat-icon class="tab-icon" svgIcon="accumulator"></mat-icon> -->
      设备信息
    </ng-template>

    <div class="tab2">
      <mat-card class="display-panel">
        <div class="mat-h1 text-center">电池运行信息</div>
        <div class="board">
          <app-vs-chart [chartValue]="realtimeData['电压']"
            [options]="{ min:20, max:26, unit:'V',animation:{time:'800ms'}}">
          </app-vs-chart>
          <app-vs-chart [chartValue]="realtimeData['电流']"
            [options]="{ min:0, max:200, unit:'A',title:'Current',color:'#F29600',animation:{time:'800ms'}}">
          </app-vs-chart>
          <app-vs-chart [chartValue]="realtimeData['SOC']"
            [options]="{ min:0, max:100, unit:'%',title:'SOC',color:'#74C6CD',animation:{time:'800ms'}}">
          </app-vs-chart>
          <app-vs-chart [chartValue]="realtimeData['SOH']"
            [options]="{ min:50, max:100, unit:'%',title:'SOH',color:'#9B81AB',animation:{time:'800ms'}}">
          </app-vs-chart>
        </div>
      </mat-card>

      <mat-card class="display-panel">
        <div class="mat-h1 position text-center">
          单体电压和均衡状态
          <span>均衡关 <mat-icon svgIcon="dtu-eq-off" style="color: currentColor;opacity: 0.5;"></mat-icon> 均衡开 <mat-icon
              svgIcon="dtu-eq-on" style="color:#FF9900"></mat-icon>
          </span>
        </div>
        <div class="battery">
          <ng-container *ngFor="let val of  eqdata">
            <app-battery-eq [series]="val.series" [voltage]="val.voltage" [eqoff]="val.eqoff">
            </app-battery-eq>
          </ng-container>
        </div>
      </mat-card>
    </div>
  </mat-tab>


  <!-- *******   分时电价和错峰策略配置   ******* -->
  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon class="tab-icon" svgIcon="accumulator"></mat-icon>
      分时电价和错峰策略配置
    </ng-template>

    <mat-card>
      <div class="import-content">
        <button class="import-btn" mat-raised-button color="primary">导入电价<input type="file"
            (change)="importFile($event)" /></button>
        <!-- <button class="import-btn" mat-raised-button color="primary" (click)="exportExcelFile()">导出电价</button> -->

        <!-- 导入的表格数据 -->
        <table mat-table [dataSource]="electrovalenceExcelData" class="excel-table" *ngIf="electrovalenceExcelData">
          <ng-container matColumnDef="status">
            <th mat-header-cell *matHeaderCellDef> 状态 </th>
            <td mat-cell *matCellDef="let element"> {{element.status}} </td>
          </ng-container>

          <ng-container matColumnDef="begin">
            <th mat-header-cell *matHeaderCellDef> 开始 </th>
            <td mat-cell *matCellDef="let element">
              <input matInput [(ngModel)]="element.begin" type="text" [disabled]="element.disabled">
            </td>
          </ng-container>

          <ng-container matColumnDef="electrovalence">
            <th mat-header-cell *matHeaderCellDef> 电价 </th>
            <td mat-cell *matCellDef="let element">
              <input matInput [(ngModel)]="element.electrovalence" type="text" [disabled]="element.disabled">
            </td>
          </ng-container>

          <ng-container matColumnDef="function">
            <th mat-header-cell *matHeaderCellDef> 执行指令 </th>
            <td mat-cell *matCellDef="let element">
              <button mat-raised-button [color]="element.disabled ? 'primary':'accent'"
                (click)="element.disabled=!element.disabled;save(element)">{{element.disabled? "编辑": "确定"}}</button>
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
      </div>

    </mat-card>
  </mat-tab>
</mat-tab-group>
